<template>
	<view class="edu-article-list">
		<block v-if="range">
			<view
				@click="redirectTo(index)"
				class="article-list-item flex align-center"
				v-for="(item,index) in range"
				:key="index"
			>
				<view class="flex flex-column justify-around" style="height: 180rpx;">
					<view class="title mar-t-5">
						<text class="font-color-666 font-size-16 font-bold text-justify tq-text-line1">{{item.title}}</text>
					</view>
					<view class="desc mar-t-5 tq-text-line1 font-size-13 font-color-666 mar-t-5 text-justify" v-if="item.desc">
						{{item.desc}}
					</view>
					<view class="flex align-center mar-t-3">
						<text class="font-color-999 font-size-13">{{item.create_time_text||''}}</text>
						<view class="flex align-center justify-end flex-1 font-color-999">
							<view class="flex align-center">
								<text class="font-size-13">{{Number(item.real_views) + Number(item.v_views)}} 阅读</text>
								<!-- <text class="iconfont icon-read font-size-14 mar-l-1"></text> -->
							</view>
							<view class="flex align-center mar-l-10">
								<text class="font-size-13">{{Number(item.hit_num) + Number(item.v_views)}} 访问</text>
								<!-- <text class="iconfont icon-view font-size-14 mar-l-2"></text> -->
							</view>
						</view>
					</view>
				</view>
				<image class="art-image mar-l-20" :src="item.image||''" lazy-load=true mode="aspectFill"></image>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: ['range'],
	methods: {
		redirectTo(index) {
			// console.log(this.range)
			if (this.range) {
				const current_item = this.range[index]
				if (current_item.type != 'link') {
					uni.navigateTo({
						url: '/pages/edu/detail?id=' + current_item.id
					})
				} else {
					location.href = current_item.link_url
				}
			}
		}
	}
}
</script>

<style>
.item-info{
	box-sizing: border-box
}
.art-image {
	flex: 0 0 200rpx;
	width: 200rpx;
	height: 180rpx;
	background-color: #cccccc;
	border-radius: 14rpx;
	overflow: hidden;
}
.article-list-item{
	margin-top: 20rpx;
	/* margin-bottom: 10rpx; */
	padding: 24rpx 20rpx;
	box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.5) !important;
}
.article-list-item .info .view-count {
	right: 0;
}
.article-list-item .desc{
	line-height: 1.8em;
}
</style>